// 引入React的useState和useEffect钩子
import { useState, useEffect } from "react";
// 引入Arco Design的Drawer组件
import { Drawer } from "@arco-design/web-react";
// 引入Ant Design的Form、Input、InputNumber和Switch组件
import { Form, Input, InputNumber, Switch } from "antd";
// 引入nanoid库，用于生成唯一的id
import { nanoid } from "nanoid";
// 引入自定义的useStore钩子，用于获取store中的数据
import { useStore } from "@/store";

const VideoModal = ({ visibleVideoModal, isAdd, elementsIndex }) => {
  // 定义一个状态变量modalVisible，用于控制模态框的显示与隐藏
  const [modalVisible, setModalVisible] = useState(false);
  // 使用Form.useForm()创建一个表单实例
  const [form] = Form.useForm();
  // 使用useStore()获取powerPointArr、curpowerPointIndex和modifyPowerPoint
  const { powerPointArr, curpowerPointIndex, modifyPowerPoint } = useStore();

  // 当visibleVideoModal发生变化时，执行该函数
  useEffect(() => {
    if (visibleVideoModal) {
      // 设置模态框为可见
      setModalVisible(true);
      if (isAdd) {
        // 如果是新增元素，重置表单
        form.resetFields();
      } else {
        // 编辑进来
        // 获取当前元素的属性值
        const { blockWidth, blockHeight, videoUrl, autoPlay, xAxis, yAxis } =
          powerPointArr[curpowerPointIndex - 1].elements[elementsIndex];
        // 设置表单的初始值
        form.setFieldsValue({
          blockWidth,
          blockHeight,
          videoUrl,
          autoPlay,
          xAxis,
          yAxis,
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visibleVideoModal]);

  // 取消按钮的点击事件处理函数
  const handleCancel = () => {
    // 重置表单
    form.resetFields();
    // 设置模态框为不可见
    setModalVisible(false);
  };

  // 确定按钮的点击事件处理函数
  const handleOK = () => {
    // 验证表单
    form.validateFields().then((values) => {
      // 复制powerPointArr
      const newSlideList = [...powerPointArr];
      if (isAdd) {
        // 新增一个元素
        newSlideList[curpowerPointIndex - 1].elements.push({
          sortId: newSlideList[curpowerPointIndex - 1].elements.length + 1, // 排序id
          id: nanoid(),
          type: "Video",
          ...values,
        });
      } else {
        // 修改一个元素
        newSlideList[curpowerPointIndex - 1].elements[elementsIndex] = {
          ...newSlideList[curpowerPointIndex - 1].elements[elementsIndex],
          ...values,
        };
      }
      //  修改一个元素时
      modifyPowerPoint(newSlideList);
      // 设置模态框为不可见
      setModalVisible(false);
    });
  };

  return (
    <Drawer
      // 设置抽屉宽度
      width={500}
      // 设置抽屉标题
      title={"设置视频"}
      // 设置抽屉是否可见
      visible={modalVisible}
      // 设置抽屉取消按钮的回调函数
      onCancel={handleCancel}
      // 设置抽屉确定按钮的回调函数
      onOk={handleOK}
      // 设置抽屉确定按钮的文本
      okText="确定"
      // 设置抽屉取消按钮的文本
      cancelText="取消"
    >
      <Form
        // 设置表单标签的宽度
        labelCol={{ span: 6 }}
        // 设置表单实例
        form={form}
        // 设置表单的初始值
        initialValues={{
          xAxis: 0,
          yAxis: 0,
          // 文本区宽度
          blockWidth: 100,
          // 文本区高度
          blockHeight: 50,
          // 视频地址
          videoUrl: "",
          // 是否自动播放
          autoPlay: false,
        }}
      >
        <Form.Item
          label="距左上角水平值"
          name="xAxis"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        <Form.Item
          label="距左上角垂直值"
          name="yAxis"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        <Form.Item
          // 设置表单项的标签
          label="视频宽度"
          // 设置表单项的名称
          name="blockWidth"
          // 设置表单项的校验规则
          rules={[{ required: true, message: "不得为空" }]}
        >
          {/* // 设置表单项的输入框 */}
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        <Form.Item
          // 设置表单项的标签
          label="视频高度"
          // 设置表单项的名称
          name="blockHeight"
          // 设置表单项的校验规则
          rules={[{ required: true, message: "不得为空" }]}
        >
          {/* // 设置表单项的输入框 */}
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        <Form.Item
          // 设置表单项的标签
          label="视频地址"
          // 设置表单项的名称
          name="videoUrl"
          // 设置表单项的校验规则
          rules={[{ required: true, message: "不得为空" }]}
        >
          {/* // 设置表单项的输入框 */}
          <Input />
        </Form.Item>
        <Form.Item label="是否自动播放" name="autoPlay">
          <Switch />
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default VideoModal;
